<template>
  <div>
    <el-dialog
      :title="this.$t('ExpressDeliveryManagementLang.Waybill_details')"
      :visible.sync="Visible"
      width="100%"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <div class="midContant clearfix">
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressDeliveryManagementLang.Waybill_info')}}</div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Waybill_date')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.waybill_day_date"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.currency')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.currency"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Promise_days')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.promiss_days"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Type_goods')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.goods_type"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.IsBrand')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.is_brand_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.type_shipping')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.transport"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Origin')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.str_city"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.destination')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.end_city"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Shipper')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.costomer"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.sale')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.sale_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.sender')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.receiver_name"
                ></el-input>
              </div>
            </div>
            <div class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Sender_phone_number')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.receiver_phone"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Ticket_number')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.ticket_number"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Number_packages')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.packages_number"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.weights')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.weight"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.volumes')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.volume"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Product_Name')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.goods_name"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.number')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.goods_number"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Billing_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.billing_method"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Unit_Price')}}({{current_currency_matches}}/{{current_billing_method_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.unit_price"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.discount')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.discount"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.freight')}}({{current_currency_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.transport_price"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.reduction')}}({{current_currency_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.reduce"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Total_amount')}}({{current_currency_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.price_all"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.payment_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.pay_type"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Insurance_type')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.protect_price_type"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.yibao_billing_method')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.charging_protect_price_type"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Unit_price_voluntary')}}({{current_currency_matches}}/{{current_charging_protect_price_type_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.protect_price"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Guarantee_rate')}}:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.guaranteed_rate"
                ></el-input>
              </div>
            </div>
            <div style="width: 15%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.premium')}}({{current_currency_matches}}):
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.protect_price_all"
                ></el-input>
              </div>
            </div>
          </div>
          <div class="dialogBoxItem">
            <div style="width: 32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.service_charge')}}￥:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.survey_price"
                ></el-input>
                <div style="margin-left:5px;white-space:nowrap;color:#62afff;cursor:pointer;" @click="details">{{$t('common.details')}}</div>
              </div>
            </div>
            <div style="width: 32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Packing_fee')}}￥:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.pack_price_user"
                ></el-input>
              </div>
            </div>
            <div style="width: 32%;" class="dialogBoxItemRow">
              <div class="title">
                {{$t('ExpressDeliveryManagementLang.Advance_payment_fee')}}￥:
              </div>
              <div class="contant">
                <el-input
                  disabled
                  v-model="data.advance_payment_price_user"
                ></el-input>
              </div>
            </div>
          </div>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Product_information')}}</div>
          <MyTable
          :tableColumn="tableColumn_goods"
          :tableData="tableData_goods"
          :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
        <div class="dialogBox top">
          <div class="dialogBoxTitle">{{$t('ExpressOrderManagementLang.Package_information')}}</div>
          <MyTable
            :tableColumn="tableColumn_packages"
            :tableData="tableData_packages"
            :isOrder="false"
          >
            <template v-slot:content="scope">
              <span>{{ scope.row[scope.config.prop] }}</span>
            </template>
          </MyTable>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button  @click="cancel" size="small">{{$t('common.cancel')}}</el-button>
      </span>
      
    </el-dialog>
    <ServiceFee
      ref="serviceFee"
    ></ServiceFee>
  </div>
</template>

<script>
import ServiceFee from "../ExpressDeliveryManagenment/ExpressDeliveryOrderManagement_issueAccounts_ServiceFee";
export default {
  components: {ServiceFee},
  props: {
    // 接收绑定参数
    midHight: [Number,String],
  },
  data() {
    return {
      Visible: false,
      waybill_number:'',
      data:{},
      current_currency_matches:'$',
      current_billing_method_matches:'kg',
      current_charging_protect_price_type_matches:'kg',
      tableColumn_packages: [
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.Number_packages'),
          prop: "number",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.package_Number'),
          prop: "package_number",
          width: 80,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.weight'),
          prop: "package_weight",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.long'),
          prop: "package_long",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.wide'),
          prop: "package_wide",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.high'),
          prop: "package_high",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.volume'),
          prop: "volume",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.density'),
          prop: "density",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.goods_name'),
          prop: "goods_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.quantity_num'),
          prop: "goods_number",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.model_num'),
          prop: "model_number",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.packing_method'),
          prop: "packing_method",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressDeliveryManagementLang.remarks'),
          prop: "remarks",
          width: 120,
        },
      ],
      tableColumn_goods: [
        {
          label: "",
          prop: "table_code",
          width:40,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Product_Name'),
          prop: "goods_name",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.commodity_value'),
          prop: "goods_price",
          width: 120,
        },
        {
          checked: true,
          label: this.$t('ExpressOrderManagementLang.Quantity_goods'),
          prop: "goods_num",
          width: 120,
        },
        
      ],
      tableData_goods: [],
      tableData_packages: [],
      confirmTrue:true,//确定按钮保护
    };
  },
  created() {
    
  },
  mounted() {
  },
  deactivated(){
    
  },
  methods: {
   
    init(data) {
      console.log(data)
      this.waybill_number=data.waybill_number
      this.Visible = true;
      this.getData();
    },
    //获取单条
    getData() {
      this.$get("waybillInfo", { waybill_number: this.waybill_number}).then((res) => {
        this.data = res.data;
        this.tableData_goods=res.data.goods
        this.tableData_packages=res.data.packages
        if(this.data.billing_method=="公斤"){
          this.current_billing_method_matches='kg'
        }else if(this.data.billing_method=="立方"){
          this.current_billing_method_matches='m³'
        }else if(this.data.billing_method=="鞋类"){
          this.current_billing_method_matches='双'
        }else if(this.data.billing_method=="整车"){
          this.current_billing_method_matches='车'
        }
        if(this.data.charging_protect_price_type=="公斤"){
          this.current_charging_protect_price_type_matches='kg'
        }else if(this.data.charging_protect_price_type=="立方"){
          this.current_charging_protect_price_type_matches='m³'
        }else if(this.data.charging_protect_price_type=="鞋类"){
          this.current_charging_protect_price_type_matches='双'
        }else if(this.data.charging_protect_price_type=="整车"){
          this.current_charging_protect_price_type_matches='车'
        }
        if(this.data.currency=="美元"){
          this.current_currency_matches='$'
        }else if(this.data.currency=="人民币"){
          this.current_currency_matches='￥'
        }else if(this.data.currency=="卢布"){
          this.current_currency_matches='₽'
        }
      });
    },
    details(){
      let arr=this.tableData_packages.filter(item=>{return !!item.checked})
      this.$refs.serviceFee.init(this.data.survey_price_list,'',[],true)
    },
    //取消修改
    cancel() {
      this.data={}
      this.tableData_packages=[] 
      this.Visible = false;
    },
  },
};
</script>

<style scoped lang="less" >
  .midContant {
    border: 0;
    width: 100%;
  }
  .dialogBox .dialogBoxItem .dialogBoxItemRow {
    width: 24%;
  }
</style>